<template>
  <div class="file-list">
    <el-card shadow="hover">
      <div slot="header" class="flex jusc">
        <div class="head-title">
          <span>聊天列表</span>
          <span class="table-choose" v-show="multipleSelection.length > 0">已选中{{ multipleSelection.length
          }}个</span>
        </div>
        <div class="flex">
          <div class="head-input">
            <el-input v-model="searchContent" prefix-icon="el-icon-search" @keyup.enter.native="getChatList"
              placeholder="搜索用户账号"></el-input>
          </div>
          <div class="head-btn">
            <el-button type="danger" @click="del(-1)" size="medium">批量删除</el-button>
            <el-button type="success" @click="back(-1)" size="medium">批量恢复</el-button>
          </div>
        </div>
      </div>
      <div>
        <el-table ref="multipleTable" :data="chatList" tooltip-effect="dark" style="width: 100%"
          @selection-change="handleSelectionChange" v-loading="isLoading">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="id" label="聊天号"></el-table-column>
          <el-table-column label="聊天类型" width="80">
            <template slot-scope="scope">
              <span v-show="scope.row.type == 1">私聊</span>
              <span v-show="scope.row.type == 2">群聊</span>
            </template>
          </el-table-column>
          <el-table-column prop="userId" label="创建者ID" width="150"></el-table-column>
          <el-table-column prop="name" label="标题" width="150"></el-table-column>
          <el-table-column prop="introduce" label="介绍"></el-table-column>
          <el-table-column prop="totalCount" label="总人数" width="90"></el-table-column>
          <el-table-column prop="coverImage" label="封面" width="90"></el-table-column>
          <el-table-column prop="lastMessage" label="最新消息"></el-table-column>
          <el-table-column label="是否展示" width="80">
            <template slot-scope="scope">
              <span v-show="scope.row.isShow == 1">展示</span>
              <span v-show="scope.row.isShow == 2">隐藏</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="80">
            <template slot-scope="scope">
              <span v-show="scope.row.status == 1">正常</span>
              <span v-show="scope.row.status == 2">删除</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="edit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="del(scope.row.id)" v-if="scope.row.status == 1">删除</el-button>
              <el-button size="mini" type="success" @click="back(scope.row.id)" v-else>恢复</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pag">
        <el-pagination background layout="prev, pager, next" @current-change="changePage" :current-page="currPage"
          :page-size="pageSize" :total="totalPage">
        </el-pagination>
      </div>
    </el-card>
    <el-dialog title="编辑分组" :visible.sync="editDialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="form" :model="editFileItem" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="editFileItem.name"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="editFileItem.type" placeholder="请选择聊天类型">
            <el-option label="私聊" :value="1"></el-option>
            <el-option label="群聊" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input v-model="editFileItem.introduce"></el-input>
        </el-form-item>
        <el-form-item label="总人数">
          <el-input v-model="editFileItem.totalCount"></el-input>
        </el-form-item>
        <el-form-item label="最新消息">
          <el-input v-model="editFileItem.lastMessage"></el-input>
        </el-form-item>
        <el-form-item label="是否展示">
          <el-select v-model="editFileItem.isShow" placeholder="请选择是否展示">
            <el-option label="展示" :value="1"></el-option>
            <el-option label="隐藏" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'chat-list',
  data() {
    return {
      multipleSelection: [],
      searchContent: null,
      pageSize: 10,
      currPage: 1,
      totalPage: 1,
      isLoading: false,
      editDialogVisible: false,
      editFileItem: {},
    }
  },
  mounted() {
    this.getChatList()
  },
  methods: {
    async getChatList() {
      this.isLoading = true
      let res = await this.$store.dispatch("getChatList", {
        limit: this.pageSize,
        page: this.currPage,
        key: this.searchContent,
      })
      this.isLoading = false
      if (res.success) {
        this.currPage = res.data.currPage
        this.totalPage = res.data.totalCount
      }
      else this.$global.resError(res)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    changePage(page) {
      this.currPage = page
      this.getChatList()
    },
    edit(item) {
      this.editFileItem = item
      this.editDialogVisible = true
    },
    handleClose(done) {
      done()
      setTimeout(() => {
        this.editFileItem = {}
      }, 300)
    },
    async save() {
      let res = await this.$store.dispatch("updateChat", this.editFileItem)
      if (res.success) {
        this.$message.success(res.message)
        this.getChatList()
      }
      else this.$global.resError(res)
    },
    del(id) {
      // 多选删除
      if (id == -1) {
        this.multipleSelection = this.multipleSelection.map(item => item.id)
        this.submitUpdateStatus(this.multipleSelection, 2)
      }
      // 单选删除
      else {
        var list = []
        list.push(id)
        this.submitUpdateStatus(list, 2)
      }
    },
    back(id) {
      if (id == -1) {
        this.multipleSelection = this.multipleSelection.map(item => item.id)
        this.submitUpdateStatus(this.multipleSelection, 1)
      }
      else{
        this.submitUpdateStatus([id], 1)
      }

    },
    async submitUpdateStatus(list, status) {
      if (list.length == 0) {
        this.$message.warning("请先选择")
        return
      }
      let res = await this.$store.dispatch("updateChatStatus", {
        list: list,
        status: status
      })
      if (res.success) {
        this.$message.success(res.message)
        this.getChatList()
      }
      else this.$global.resError(res)
    }
  },
  computed: {
    chatList() {
      return this.$store.state.im.chatList || []
    }
  }
}
</script>

<style scoped>
.clearfix {
  display: flex;
  align-items: center;
}

.head-btn {
  margin: 0 10px;
}

.file-list {
  background: rgb(248, 248, 248);
}

.pag {
  text-align: center;
  margin-top: 20px;
}

.head-title {
  font-size: 17px;
  font-weight: 550;
}

.table-choose {
  font-size: 13px;
  color: gray;
  margin-left: 10px;
}

.flex {
  display: flex;
  align-items: center;
}

.jusc {
  justify-content: space-between;
}

.table-choose {
  font-size: 13px;
  color: gray;
  margin-left: 10px;
}
</style>